<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer {
        width: 900px;
        /*height: 500px;*/
        border: 1px solid red;
        margin: 0 auto;
    }
    .top {
        height: 70px;
        border: 1px solid yellowgreen;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .title {
        width: 20%;
        height: 100%;
        text-align: center;
        border: 1px solid skyblue;
    }
    .toolkit {
        width: 80%;
        height: 100%;
        border: 1px solid violet;
        display: flex;
        align-items: center;
    }
    ul{
        padding:0;
    }
    li {
        list-style: none;
        width: 100%;
        border: 1px seashell solid;
        height: 80px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        line-height: 80px;
    }
    .liLeft {
        width: 8%;
        height: 100%;
        border: 1px solid gold;
    }
    .liMid {
        width: 87%;
        height: 100%;
        border: 1px solid gold;
    }
    .liRight {
        width: 5%;
        height: 100%;
        border: 1px solid gold;
    }
    .finished {
        width: 900px;
        border: 1px solid red;
        margin: 0 auto;
    }
</style>
<body>
<div class="outer">
    <div class="top">
        <div class="title"><h3>Todo-List</h3></div>
        <div class="toolkit">
            <div class="add">
                <input class="addInput" type="text">
                <button class="addButton" onclick="addItem()">添加</button>
            </div>
        </div>
    </div>
    <div class="content">
        <ul class="ul">
            <li onclick="done(event)">
                <button class="liLeft">完成</button>
                <div class="liMid"></div>
                <button class="liRight">删除</button>
            </li>
        </ul>
    </div>
</div>
<div class="finished">
    <ul class="ful"></ul>
</div>
<script>
    function addItem(tag = '.ul') {
        const val = document.querySelector('.addInput')
        const content = val.value
        val.value = ''
        const ul = document.querySelector(tag)
        const fragment = document.createElement('li')
        fragment.onclick = done
        const left = document.createElement('button')
        left.setAttribute('class','liLeft')
        left.innerText = '完成'
        const mid = document.createElement('div')
        mid.setAttribute('class','liMid')
        mid.innerText = content
        const right = document.createElement('button')
        right.setAttribute('class','liRight')
        right.innerText = '删除'
        fragment.appendChild(left)
        fragment.appendChild(mid)
        fragment.appendChild(right)
        ul.appendChild(fragment)
    }
    function addItem2(tag = '.ful',child) {
        const ul = document.querySelector(tag)
        const fragment = document.createElement('li')
        fragment.onclick = done2
        const left = document.createElement('div')
        left.setAttribute('class','liLeft')
        left.innerText = '已完成'
        const mid = document.createElement('div')
        mid.setAttribute('class','liMid')
        mid.innerText = child
        const right = document.createElement('button')
        right.setAttribute('class','liRight')
        right.innerText = '删除'
        fragment.appendChild(left)
        fragment.appendChild(mid)
        fragment.appendChild(right)
        ul.appendChild(fragment)
        console.log(ul)
    }
    function done(e) {
        if (e.target.innerText === '完成') {
            addItem2('.ful',e.currentTarget.childNodes[1].innerText)
        }
        e.currentTarget.parentNode.removeChild(e.currentTarget)
    }
    function done2(e) {
        e.currentTarget.parentNode.removeChild(e.currentTarget)
    }
</script>
</body>
</html>
